<template>
  <div>
    <el-card style="width: 100%" shadow="always">
      <el-button type="primary" @click="addForm">添加分类</el-button>
    </el-card>
    <el-table :border="true" :data="tableDataDetail" style="width: 100%">
      <el-table-column prop="id" label="装备编号" width="180" />
      <el-table-column prop="name" label="装备名称" width="180" />
      <el-table-column prop="type" label="装备类型" width="150" />
      <el-table-column prop="location" label="使用场所" width="150" />
      <el-table-column prop="storage" label="存放位置" width="150" />
      <el-table-column prop="purchaseDate" label="购置日期" width="150" />
      <el-table-column prop="status" label="状态" width="100" />
      <el-table-column prop="lastCheck" label="最近检查日期" width="150" />
      <el-table-column prop="notes" label="备注" />
      <el-table-column fixed="right" label="操作" min-width="150">
        <template #default="scoped">
          <el-button link type="primary" size="small" @click="edit(scoped.row)"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="del(scoped.row)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="detail(scoped.row)"
            >查看装备</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑分类弹出框 -->
    <el-dialog v-model="dialogEdit" title="编辑分类" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">分类名称</span>
          <div class="content">
            <el-input
              v-model="form.phone"
              style="width: 240px"
              placeholder="名称"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveEdit">确定</el-button>
          <el-button type="primary" @click="dialogEdit = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 添加分类弹出框 -->
    <el-dialog v-model="dialogAdd" title="添加分类" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">添加分类</span>
          <div class="content">
            <el-input
              v-model="form.phone"
              style="width: 240px"
              placeholder="名称"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveAdd">确定</el-button>
          <el-button type="primary" @click="dialogAdd = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 查看装备详情弹出框 -->
    <el-dialog v-model="dialogDetail" title="查看装备" width="800">
      <el-table :data="tableDataDetail" style="width: 100%">
        <el-table-column prop="id" label="装备编号" width="180" />
        <el-table-column prop="name" label="装备名称" width="180" />
        <el-table-column prop="type" label="装备类型" width="150" />
        <el-table-column prop="location" label="使用场所" width="150" />
        <el-table-column prop="storage" label="存放位置" width="150" />
        <el-table-column prop="purchaseDate" label="购置日期" width="150" />
        <el-table-column prop="status" label="状态" width="100" />
        <el-table-column prop="lastCheck" label="最近检查日期" width="150" />
        <el-table-column prop="notes" label="备注" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

// 主表格数据
const tableData = reactive([
  {
    id: 1,
    phone: "工具类",
    username: "小李",
    question: "2023-11-01",
    frequency: "2024-06-01"
  },
  {
    id: 2,
    phone: "防护装备",
    username: "小王",
    question: "2024-07-13",
    frequency: "2024-07-15"
  }
]);

// 装备详情数据
const tableDataDetail = ref([
  {
    id: "OT20231101",
    name: "折叠梯",
    type: "工具设备",
    location: "综合办公楼维修区",
    storage: "工具间A1",
    purchaseDate: "2020-05-10",
    status: "正常",
    lastCheck: "2024-08-15",
    notes: "定期保养，符合安全使用要求"
  },
  {
    id: "OT20231102",
    name: "移动照明灯",
    type: "灯光设备",
    location: "临时指挥中心",
    storage: "仓库B区",
    purchaseDate: "2019-11-22",
    status: "正常",
    lastCheck: "2024-07-30",
    notes: "用于夜间突发事件或临时施工照明"
  },
  {
    id: "OT20231103",
    name: "雨衣",
    type: "防护装备",
    location: "巡查使用",
    storage: "装备柜C3",
    purchaseDate: "2023-03-10",
    status: "正常",
    lastCheck: "2024-09-01",
    notes: "雨季多发时段配发给巡查人员"
  },
  {
    id: "OT20231104",
    name: "防水靴",
    type: "防护装备",
    location: "环境应急处理",
    storage: "装备柜C3",
    purchaseDate: "2021-06-15",
    status: "正常",
    lastCheck: "2024-06-20",
    notes: "使用完毕清洁，存放干燥处"
  },
  {
    id: "OT20231105",
    name: "执法标志牌",
    type: "标志设备",
    location: "执法现场",
    storage: "仓库D1",
    purchaseDate: "2022-04-18",
    status: "正常",
    lastCheck: "2024-05-25",
    notes: "用于执法现场布置警示标志"
  },
  {
    id: "OT20231106",
    name: "隔离栏",
    type: "现场隔离设备",
    location: "临时管控区域",
    storage: "仓库E区",
    purchaseDate: "2020-09-30",
    status: "维修中",
    lastCheck: "2024-10-10",
    notes: "部分隔离栏破损，正在修复"
  },
  {
    id: "OT20231107",
    name: "手提灭火器",
    type: "安全设备",
    location: "公共安全巡逻",
    storage: "仓库F2",
    purchaseDate: "2018-08-12",
    status: "报废",
    lastCheck: "2024-08-05",
    notes: "使用年限已到，需更换新设备"
  },
  {
    id: "OT20231108",
    name: "急救箱",
    type: "医疗设备",
    location: "事故处理备用",
    storage: "工具间A2",
    purchaseDate: "2022-02-28",
    status: "正常",
    lastCheck: "2024-07-18",
    notes: "定期检查药品和急救用品有效期"
  }
]);

// 表单数据
const form = ref({ phone: "", username: "", question: "", frequency: "" });

// 对话框控制变量
const dialogEdit = ref(false);
const dialogAdd = ref(false);
const dialogDetail = ref(false);
const rowIndex = ref(0);

// 编辑功能
function edit(row) {
  dialogEdit.value = true;
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  form.value = { ...row };
}

// 保存编辑
function saveEdit() {
  ElMessage({ message: "编辑成功", type: "success" });
  dialogEdit.value = false;
}

// 删除功能
function del(row) {
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  tableData.splice(rowIndex.value, 1);
  ElMessage({ message: "删除成功", type: "success" });
}

// 添加分类
function addForm() {
  form.value = { phone: "", username: "", question: "", frequency: "" };
  dialogAdd.value = true;
}

// 保存添加
function saveAdd() {
  tableData.push({
    id: tableData.length + 1,
    ...form.value,
    question: getCurrentDate(),
    username: "系统"
  });
  ElMessage({ message: "添加成功", type: "success" });
  dialogAdd.value = false;
}

// 打开装备详情
function detail() {
  dialogDetail.value = true;
}

// 获取当前日期
function getCurrentDate() {
  const date = new Date();
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 12px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.form-handle {
  grid-column: 1 / -1;
  text-align: right;
}

.form-item {
  display: flex;
  align-items: center;

  .title {
    width: 80px;
  }

  .content {
    flex-grow: 1;
  }
}
</style>
